<template>
  <div>
    <!-- 用户信息 -->
    <div class="backgroundImageBase info" :style="'background-image: url(' + infoImage + ')'">
      <div class="flex_cc card">
        <div class="backgroundImageBase headImage" :style="'background-image: url(' + headImage + ')'"></div>
        <div class="phone">13312345678</div>
      </div>
    </div>
    <!-- 操作列表 -->
    <div class="listBox">
      <div class="flex_cc list" v-for="(item, index) in list" :key="index" @click="openPopup(item.popup, item.route)">
        <div class="backgroundImageBase icon" :style="'background-image: url(' + item.icon + ')'"></div>
        <div class="name">{{ item.name }}</div>
        <div class="backgroundImageBase icon" :style="'background-image: url(' + icon_right + ')'"></div>
      </div>
    </div>
    <!-- 回到首页 -->
    <div class="backgroundImageBase gotoIndex" :style="'background-image: url(' + icon_home + ')'" @click="home()"></div>
    <!-- popup coupon -->
    <van-popup v-model="popup_coupon">我的优惠券</van-popup>
    <!-- popup usertips -->
    <van-popup v-model="popup_usertips">用户指南</van-popup>
    <!-- popup contact -->
    <van-popup v-model="popup_contact">联系客服</van-popup>
  </div>
</template>

<script>
export default {
  name: 'user-center',
  components: {},
  props: {
    // routes: Object
  },
  data () {
    return {
      infoImage: require('../../static/banner01.jpg'),
      headImage: require('../../static/601.jpg'),
      list: [
        {
          icon: require('../../static/icon_coupon.png'),
          name: '我的优惠券',
          popup: 'coupon'
        },
        {
          icon: require('../../static/icon_orders.png'),
          name: '我的订单',
          route: "this.routes.myoreder"
        },
        {
          icon: require('../../static/icon_usertips.png'),
          name: '用户指南',
          popup: 'usertips'
        },
        {
          icon: require('../../static/icon_usertips.png'),
          name: '联系客服',
          popup: 'contact'
        }
      ],
      icon_right: require('../../static/icon_right.png'),
      icon_home: require('../../static/icon_home.png'),
      popup_coupon: false,
      popup_usertips: false,
      popup_contact: false,
    }
  },
  methods: {
    home () {
      window.location.href = 'https://paotui.ddptkfw.com/home/index'
    },
    openPopup(popup, route){
      console.log(popup)
      console.log(route)
    }
  }
}
</script>
